import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { todo_content, todo_content_end } from '@/static/scss/index.scss'
import a from '@/static/scss/index.scss'
console.log(a)
class TodolistItem extends Component {
	render() {
		const itemData = this.props.itemData
		const endTodoItem = this.props.endTodoItem
		return (
			<li className='list-group-item'>
				<input type='checkbox' onClick={() => endTodoItem(this.props.index)} />
				<span className={[todo_content, itemData.isEnd ? todo_content_end : ''].join(' ')}>
					{itemData.content}
				</span>
			</li>
		)
	}
}
TodolistItem.propTypes = {
	itemData: PropTypes.object.isRequired,
	endTodoItem: PropTypes.func.isRequired,
	index: PropTypes.number.isRequired
}
TodolistItem.deafultProps = {
	itemData: {}
}

export default TodolistItem
